<template>
	<view>
		<cu-custom bgColor="bg-white" isBack="true" bgImage="../../static/icon/custom-tabar.png">
			<block slot="content">手机号换绑</block>
		</cu-custom>
		<view>
			<view class="cu-form-group text-gray">
				换绑手机后，下次登录可使用新手机号登录。当前手机号：{{geTel(user.phone)}}
			</view>
			<form @submit="submit">
		
				<view class="cu-form-group ">
					<view class="title">手机号</view>
					<input placeholder="请输入新的手机号" name="newPhone"></input>
				</view>
				<view class="cu-form-group ">
					<view class="title">身份证号码(必填)</view>
					<input placeholder="请输入身份证号码" name="idcard"></input>
				</view>
				<view class="cu-form-group ">
					<view class="title">姓名(必填)</view>
					<input placeholder="请输入姓名" name="name"></input>
				</view>
				<view class="cu-form-group ">
					<view class="title">验证码</view>
					<input placeholder="请输入验证码" name="code"></input>
					<button class='cu-btn bg-pick radius-100 color-100 shadow' style="min-width:100px;" @click="sendCode" :disabled="count>0">
						{{count > 0 ? count + ' s' : '发送验证码'}}
					</button>
				</view>
				<view class="flex justify-center">
					<button class="cu-btn margin-tb-sm lg round btn" form-type="submit">确认</button>
				</view>
			</form>
		</view>
		
	</view>
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	import UserService from '../../service/user.js';
	export default {
		computed: {
			...mapState({
				user: ({ user }) => user.userInfo,
			}),
		},
		data() {
			return {
				count: '',
				timer: null,
			};
		},
		methods:{
			...mapActions(['updateNewPhone']),
		
			//隐藏手机号中间4位
			geTel(tel) {
				const reg = /^(\d{3})\d{4}(\d{4})$/;
				return tel.replace(reg, "$1****$2");
			},
			// 发送验证码
			async sendCode () {
				const TIME_COUNT = 60;
				if(!this.user.phone){
					return this.$api.msg("当前账号没有手机号")
				}
				const params = {
					type: 1,
					phone:this.user.phone
				}
				if (!this.timer) {
					const code = await UserService.getCode(params)
					this.count = TIME_COUNT;
					this.timer = setInterval(() => {
					if (this.count > 0 && this.count <= TIME_COUNT) {
						this.count--;
					} else {
						clearInterval(this.timer);
						this.timer = null;
					}
				   }, 1000)
				}
			},
			async submit(e) {
				const data = e.detail.value
				const phone = this.user.phone
				if(!data.newPhone){
					return this.$api.msg("请输入新手机号码")
				}
				if(!data.idcard){
					return this.$api.msg("请输入身份证号码")
				}
				if(!data.code){
					return this.$api.msg("请输入验证码")
				}
				const params = {
					...data,
					phone,
				}
				const updatePhone = await UserService.updateNewPhone(params)
				this.$api.msg("手机号码更换成功")
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.cu-form-group .title {
		// min-width: calc(4em + 15px);
		min-width: 8rem;
	}
	
	.radius-100{
		border-radius: 16px;
	}
	
	.bg-pick {
		background-color: #E428FD;
	}
	.color-100{
		color: #FFFFFF;
	}
	.btn{
		width: 240px;
		margin-top: 80px;
		background: #B3B3B3;
		box-shadow: 0px 3px 4px rgba(144, 144, 144, 0.14);
		color: #FFFFFF;
	}
</style>
